<template>
  <div class="pie-chart" :id="pieId"></div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  props: {
    isMobile: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    title: {
      type: String,
      default: () => {
        return ''
      }
    },
    data: {
      type: Array,
      default: () => {
        return []
      }
    },
    top: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    pieId: {
      type: String,
      default: () => {
        return 'pieId'
      }
    }
  },
  data () {
    return {
      myChart: null
    }
  },
  methods: {
    /**
     * 渲染图标数据
     * */
    readerChart: function () {
      if (this.myChart) {
        this.myChart.dispose()
      }
      if (document.getElementById(this.pieId)) {
        const height = $('#' + this.pieId).height()
        const width = $('#' + this.pieId).width()
        const relWidth = width > height ? height : width
        this.top ? $('#' + this.pieId).css('height', $('#' + this.pieId).width()) : $('#' + this.pieId).css('height', relWidth + 'px')
        const title = this.top ? [
          {
            subtext: this.title,
            left: '50%',
            top: '82%',
            textAlign: 'center',
            subtextStyle: {
              color: '#fff',
              fontSize: '18'
            }
          }
        ] : []
        const graphic = this.top ? {
          type: 'text',
          left: 'center',
          top: '48%',
          style: {
            text: this.data[0] ? this.data[0].percent : 0,
            textAlign: 'center',
            fill: '#fff',
            fontSize: 12,
            fontWeight: 700
          }
        } : {
          type: 'text',
          left: 'center',
          top: '48%',
          style: {
            text: this.data[0] ? this.data[0].percent : 0,
            textAlign: 'center',
            fill: '#fff',
            fontSize: 12,
            fontWeight: 700
          }
        }
        const series = this.top ? {
          type: 'pie',
          radius: [40, 60],
          center: ['50%', '50%'],
          left: 'center',
          itemStyle: {
            borderRadius: 2,
            borderColor: '#fff',
            borderWidth: 2
          },
          // emphasis: {
          //   label: {
          //     show: true,
          //     color: '#fff',
          //     fontSize: '12',
          //     fontWeight: 'bold'
          //   }
          // },
          label: {
            width: 100,
            height: 50,
            lineHeight: 50,
            color: '#fff',
            fontSize: '12',
            fontWeight: 'bold',
            padding: [10, 0, 10, 0],
            formatter: function (val) {
              if (val.data.percent === '0') {
                return `${val.value}`
              } else {
                return `${val.value}`
              }
            },
            position: 'outside'// 此处将展示的文字在内部展示
          },
          labelLine: {
            show: false,
            length: 6,
            length2: 6
          },
          data: this.data
        } : {
          type: 'pie',
          radius: ['50%', '70%'],
          center: ['50%', '50%', '50%'],
          left: 'center',
          top: 'center',
          width: relWidth * 0.9,
          height: relWidth * 0.9,
          itemStyle: {
            borderRadius: 2,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            alignTo: 'edge',
            formatter: `{c}\n`,
            edgeDistance: '-10',
            lineHeight: 15
          },
          labelLine: {
            show: true,
            length: 10,
            length2: 10
          },
          data: this.data
        }
        this.myChart = echarts.init(document.getElementById(this.pieId))
        this.myChart.setOption({
          title: title,
          color: ['#9ed286', '#00b3f6'],
          graphic: graphic,
          series: [series]
        })
      }
    }
  },

  mounted () {
    this.$EventBus.$on('loadEnd', () => {
      this.readerChart()
    })
  }
}
</script>
<style lang="scss" scoped>
.pie-chart {
  width:100% !important;
  height:100% !important
}

</style>
